<template>
    <div class="index">
    <div class="p-top">
      <div class="p-content">
         <span>弹幕盒子</span>
         <div class="p-top-menu">
             <ul>
                 <li>
                     <a href="#" class="active">首页</a>
                 </li>
                 <li>
                     <a href="#">下载PC版</a>
                 </li>
                 <li>
                     <a v-link="{name: 'home'}">网页版</a>
                 </li>
                 <li>
                     <a href="#">联系我们</a>
                 </li>
             </ul>
         </div>
      </div>
    </div>
    <div class="p-banner">
        <div class="p-content">
           <img src="../../assets/banner_1.png">
        </div>
    </div>
    <div class="p-down">
        <div class="p-content">
            <div class="p-dwon-item">
                <a href="#">
                    <img src="../../assets/ic_web.png">
                    <span>使用网页版</span>
                </a>
            </div>
            <div class="p-dwon-item">
                <a href="#">
                    <img src="../../assets/ic_windows.png">
                    <span>下载Windows版</span>
                </a>
            </div>
        </div>
    </div>
    <div class="p-moudel" style="background: #f5fcff;">
        <div class="p-content">
        <div class="p-left">
            <div class="p-text-c">
              <div class="p-moudel-title">实时监控</div>
              <div class="p-moudel-des">
                <p>主播可以实时监控直播间数据</p>
                <p>多直播间监控数据对比</p>
              </div>
            </div>
        </div>
        <div class="p-right">
            <div class="p-moudel-img">
                <img src="../../assets/ic_moudel_watch.png">
            </div>
        </div>
        </div>
    </div>
    <div class="p-moudel" style="background: #ffffff;">
        <div class="p-content">
        <div class="p-left">
            <div class="p-moudel-img">
                <img src="../../assets/ic_moudel_chart.png">
            </div>
        </div>
        <div class="p-right">
            <div class="p-text-c">
              <div class="p-moudel-title">数据走势图</div>
              <div class="p-moudel-des">
                <p>直播数据走势图实时看</p>
                <p>观看人数,礼物走势图,礼物分布图</p>
              </div>
            </div>
        </div>
        </div>
    </div>
    <div class="p-moudel" style="background: #f5fcff;">
        <div class="p-content">
        <div class="p-left">
                        <div class="p-text-c">
              <div class="p-moudel-title">观众统计排行</div>
              <div class="p-moudel-des">
                <p>实时统计观众数据</p>
                <p>主播可以查看观众各数据排行榜</p>
              </div>
            </div>
        </div>
        <div class="p-right">
            <div class="p-moudel-img">
                <img src="../../assets/ic_moudel_rank.png">
            </div>
        </div>
        </div>
    </div>
    <div class="p-moudel" style="background: #ffffff;">
        <div class="p-content">
        <div class="p-left">
            <div class="p-moudel-img">
                <img src="../../assets/ic_moudel_data.png">
            </div>
        </div>
        <div class="p-right">
            <div class="p-text-c">
              <div class="p-moudel-title">统计数据</div>
              <div class="p-moudel-des">
                <p>保存每天统计数据,随时查看对比</p>
                <p>统计数据云存储,数据永不丢失</p>
              </div>
            </div>
        </div>
        </div>
    </div>
    <div class="p-down" style="background: #f5fcff;">
        <div class="p-content">
            <div class="p-dwon-item">
                <a href="#">
                    <img src="../../assets/ic_web.png">
                    <span>使用网页版</span>
                </a>
            </div>
            <div class="p-dwon-item">
                <a href="#">
                    <img src="../../assets/ic_windows.png">
                    <span>下载Windows版</span>
                </a>
            </div>
        </div>
    </div>
    <div class="p-footer">
        <span>© copyright 2015-2025 河南壹测吧网络技术有限公司. All rights reserved. 豫ICP备14019986号</span>
    </div>
    </div>
</template>
<style>
    .p-top-menu{
        float: right;
    }
    .p-top-menu ul{
        list-style: none;
        padding: 0px;
        margin: 0px;
    }
    .p-top-menu ul li{
        float: left;
    }
    .p-top-menu ul li a{
        color: #898b8d;
        font-size: 16px;
        padding: 0px 20px;
        font-family: "microsoft yahei";
    }
    .p-top-menu ul li .active{
        color:#3091f2;
    }
    .p-content{
        width: 1100px;
        margin: 0px auto;
    }
    .p-top{
        line-height: 60px;
        background: #ffffff;
    }
    .p-top span{
        display: inline-block;
        padding-left: 40px;
        font-family: "microsoft yahei";
        color: #515151;
        background: url(../../assets/logo.svg) left no-repeat;
        font-size: 20px;
        background-size: 30px;
        font-weight: bold;
    }
    .p-banner{
        padding: 20px 0px;
        background: #e0f2ff;
    }
    .p-down{
        padding: 50px 0px;
        text-align: center;
        background: #ffffff;
    }
    .p-dwon-item{
        display: inline-block;
        width: 200px;
        text-align: center;
    }
    .p-dwon-item a span{
        color: #adadae;
        font-size: 18px;
        display: block;
    }
    .p-left{
        float: left;
    }
    .p-text-c{
       padding-top: 60px;
    }
    .p-right {
        float: right;
    }
    .p-right .p-moudel-img{
        padding-right: 80px;
    }
    .p-moudel{
        height: 300px;
        padding: 50px 0px;
    }
    .p-moudel .p-content{
        width: 800px;
    }
    .p-moudel-title{
        font-size: 24px;
        color: #000000;
        font-weight: bold;
    }
    .p-moudel-des{
        font-size: 18px;
        color: #515151;
    }
    .p-moudel-des p{
        padding: 0px;
        margin: 0px;
    }
    .p-footer{
        line-height: 60px;
        text-align: center;
    }
</style>